<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/users' }">用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
        <el-row :gutter="35">
          <el-col :span="7">
            <el-input placeholder="请输入用户名:" v-model="queryInfo.query" clearable @clear="getUserList()">
              <el-button slot="append" icon="el-icon-search" @click="getUsers"></el-button>
            </el-input>
        </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="addUser=true">添加用户</el-button>
          </el-col>
        </el-row>
         <el-table
            :data="userList"
            style="width: 100%"
            border
            stripe
            >
            <el-table-column type="index"></el-table-column>
            <el-table-column
              prop="username"
              label="用户名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="gener"
              label="性别"
              width="180">
            </el-table-column>
            <el-table-column
              prop="address"
              label="地址">
            </el-table-column>
            <el-table-column
              prop="phone"
              label="手机号">
            </el-table-column>
            <el-table-column
              prop="role"
              label="角色">
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button type="success" icon="el-icon-edit" size="mini" @click="updateUsers(scope.row.usercode)"></el-button>
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUser(scope.row.usercode)"></el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="this.queryInfo.pagenum"
                :page-sizes="[1, 2, 3, 5, 10]"
                :page-size="this.queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
              <!-- 添加对话框 -->
              <el-dialog
                title="添加用户"
                :visible.sync="addUser"
                width="50%"
                :before-close="handleClose"
                @close="addFromClose">
                <el-form :model="addFrom" :rules="addFromRules" ref="addFromRef" label-width="70px">
                  <el-form-item label="账号" prop="usercode">
                    <el-input v-model="addFrom.usercode"></el-input>
                  </el-form-item>
                  <el-form-item label="用户名" prop="username">
                    <el-input v-model="addFrom.username"></el-input>
                  </el-form-item>
                  <el-form-item label="密码" prop="password">
                    <el-input v-model="addFrom.password"></el-input>
                  </el-form-item>
                  <el-form-item label="性别" prop="gener">
                    <el-input v-model="addFrom.gener"></el-input>
                  </el-form-item>
                  <el-form-item label="角色" prop="role">
                    <el-input v-model="addFrom.role"></el-input>
                  </el-form-item>
                  <el-form-item label="手机" prop="phone">
                    <el-input v-model="addFrom.phone"></el-input>
                  </el-form-item>
                  <el-form-item label="地址" prop="address">
                    <el-input v-model="addFrom.address"></el-input>
                  </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="addUser = false">取 消</el-button>
                  <el-button type="primary" @click="addUsers">确 定</el-button>
                </span>
              </el-dialog>
              <!-- 修改对话框 -->
              <el-dialog
                title="修改用户"
                :visible.sync="updateUser"
                width="50%"
                :before-close="handleClose"
                @close="updateFromClose">
                <el-form :model="updateFrom" :rules="updateFromRules" ref="updateFromRef" label-width="70px">
                  <el-form-item label="账号" prop="usercode">
                    <el-input v-model="updateFrom.usercode" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="用户名" prop="username">
                    <el-input v-model="updateFrom.username"></el-input>
                  </el-form-item>
<!--                  <el-form-item label="密码" prop="password" disabled>
                    <el-input v-model="updateFrom.password"></el-input>
                  </el-form-item> -->
                  <el-form-item label="性别" prop="gener">
                    <el-input v-model="updateFrom.gener"></el-input>
                  </el-form-item>
                  <el-form-item label="角色" prop="role">
                    <el-input v-model.number="updateFrom.role"></el-input>
                  </el-form-item>
                  <el-form-item label="手机" prop="phone">
                    <el-input v-model="updateFrom.phone"></el-input>
                  </el-form-item>
                  <el-form-item label="地址" prop="address">
                    <el-input v-model="updateFrom.address"></el-input>
                  </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="updateFromClose">取 消</el-button>
                  <el-button type="primary" @click="updateUserInfo">确 定</el-button>
                </span>
              </el-dialog>
    </el-card>
  </div>
</template>

<script>
  export default{
    name:'Users',
    data(){
      return{
        queryInfo : {
          query:'',
          pagenum:2,
          pagesize:2
        },
        addFrom:{
          usercode:'',
          username:'',
          password:'',
          gener:'',
          role:'',
          phone:'',
          address:''
        },
        updateFrom:{
          usercode:'',
          username:'',
          // password:'',
          gener:'',
          role:'',
          phone:'',
          address:''
        },
        addFromRules:{
          usercode:[
            {required:true, message:'请输入账号', trigger:'blur'},
            {min:4, max:16,message:'长度在4到16个字符',trigger:'blur'}
          ],
          username:[
            {required:true, message:'请输入用户名', trigger:'blur'},
            {min:0, max:16,message:'长度在4到16个字符',trigger:'blur'}
          ],
          password:[
            {required:true, message:'请输入密码',trigger:'blur'},
            {min:6,max:12,message:'长度在6到12个字符',trigger:'blur'}
          ],
          gener:[
            {required:true, message:'请输入性别', trigger:'blur'},
            {min:0, max:10,message:'长度在0到10个字符',trigger:'blur'}
          ],
          role:[
            {required:true, message:'请输入角色,1为系统管理员,2为酒店商家,3为预订用户', trigger:'blur'},
            {min:1, max:10,message:'请输入1/2/3',trigger:'blur'}
          ],
          phone:[
            {required:true, message:'请输入手机号', trigger:'blur'},
            {min:8, max:11,message:'长度在8到11个字符',trigger:'blur'}
          ],
          address:[
            {required:true, message:'请输入地址', trigger:'blur'},
            {min:1, max:3,message:'长度在0到30个字符',trigger:'blur'}
          ],
        },
        updateFromRules:{
          usercode:[
            {required:true, message:'请输入账号', trigger:'blur'},
            {min:4, max:16,message:'长度在4到16个字符',trigger:'blur'}
          ],
          username:[
            {required:true, message:'请输入用户名', trigger:'blur'},
            {min:0, max:16,message:'长度在4到16个字符',trigger:'blur'}
          ],
          password:[
            {required:true, message:'请输入密码',trigger:'blur'},
            {min:6,max:12,message:'长度在6到12个字符',trigger:'blur'}
          ],
          gener:[
            {required:true, message:'请输入性别', trigger:'blur'},
            {min:0, max:10,message:'长度在0到10个字符',trigger:'blur'}
          ],
          role:[
            {required:true, message:'请输入角色,1为系统管理员,2为酒店商家,3为预订用户', trigger:'blur'},
            {type: 'number',min:0, max:10,message:'请输入1/2/3',trigger:'blur'}
          ],
          phone:[
            {required:true, message:'请输入手机号', trigger:'blur'},
            {min:8, max:11,message:'长度在8到11个字符',trigger:'blur'}
          ],
          address:[
            {required:true, message:'请输入地址', trigger:'blur'},
            {min:1, max:3,message:'长度在0到30个字符',trigger:'blur'}
          ],
        },
        userList:[],
		userData:[],
        total: null,
        addUser: false,
        updateUser: false
      }
    },
    created(){
      const that = this
      this.getUserList()
    },
    methods:{
      getUserList() {
        const that = this
        this.axios.get('http://localhost:8090/user/findAll/'+that.queryInfo.pagenum+'/'+that.queryInfo.pagesize).then(res=>{
          that.userList = res.data.records
           console.log(this.userList)
          that.total = res.data.total
          that.queryInfo.pagesize=res.data.size
          that.queryInfo.pagenum=res.data.current
        })
      },
      handleSizeChange(newSize){
        const that = this
        that.queryInfo.pagesize = newSize
        that.getUserList()
      },
      handleCurrentChange(newPage){
        const that = this
        that.queryInfo.pagenum = newPage
        that.getUserList()
      },
      handleClose(){},
      getUsers(){
        const that = this
        this.axios.get('http://localhost:8090/user/findUser/'+that.queryInfo.query+'/'+that.queryInfo.pagenum+'/'+that.queryInfo.pagesize).then(res=>{
          that.userList = res.data.records
          that.total = res.data.total
          that.queryInfo.pagesize=res.data.size
          that.queryInfo.pagenum=res.data.current
        })
      },
      addFromClose(){
        this.$refs.addFromRef.resetFields()
      },
      addUsers(){
        const that = this
        this.axios.post('http://localhost:8090/user/addUser',this.addFrom).then(res=>{
          console.log(res.data)
          if(res.data){
            that.addUser = false
            that.getUserList()
            this.$message.success('添加成功!')
          }
        })
      },
      updateUsers(usercode){
        const that = this
        this.updateUser=true
        this.axios.get('http://localhost:8090/user/getUser/'+usercode).then(res=>{
          that.updateFrom = res.data
        })
      },
      updateFromClose(){
        this.updateUser=false
        this.$refs.updateFromRef.resetFields()
      },
      updateUserInfo(){
        this.axios.put('http://localhost:8090/user/updateUser/'+this.updateFrom.usercode,this.updateFrom).then(res=>{
            if(res.data) {
              this.updateUser=false
              this.getUserList()
              this.$message.success('修改成功!')
            }
          })
      },
	  showUsers(usercode){
		  console.log(usercode)
		  const that = this
		  this.axios.get('http://localhost:8090/user/getUser/'+usercode).then(res=>{
		    that.userData = res.data
		  })
	  },
      async removeUser(usercode){
                const confirmsg = await this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).catch(err => {
                  return err
                })
                console.log(confirmsg)
                if(confirmsg != 'confirm'){
                  return this.$message.info('取消删除!')
                }
                else{
                  this.axios.get('http://localhost:8090/user/deleteUser/'+usercode).then(res=>{
                    // console.log(res.data)
                    if(res.data) {
                      this.getUserList()
                      this.$message.success('删除成功!')
                    }
                  })
                }
      }
    }
  }
</script>

<style>
</style>
